// 公文图形统计更多
import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaSwitch, WeaTableNew } from 'comsMobx';
import { WeaTab, WeaTools, WeaFormItem, WeaSearchGroup, WeaProgress } from 'ecCom';
import { toJS } from 'mobx';

const WeaTable = WeaTableNew.WeaTable;

@inject('reportStore')
@inject('reportDocEchartDetailListDialogStore')
@observer
// 流程图形统计更多
class ReportDocEchartDetailListDialogComponent extends React.Component {
  componentWillReceiveProps(nextProps) {
    const { reportDocEchartDetailListDialogStore } = this.props;

    if (this.props.searchParams !== nextProps.searchParams
      || this.props.analyseType != nextProps.analyseType) {
      const { searchParams } = nextProps;
      const p1 = { analyseType: nextProps.analyseType };
      const p2 = { name: nextProps.name };
      Object.assign(searchParams, searchParams, p1);
      Object.assign(searchParams, searchParams, p2);
      reportDocEchartDetailListDialogStore.doSearch(searchParams);
    }
  }

  componentDidMount() {
    this.doSearch();
  }

  doSearch() {
    const { reportDocEchartDetailListDialogStore } = this.props;
    const { searchParams } = this.props;
    const p1 = { analyseType: reportDocEchartDetailListDialogStore.condition_analyseType };
    const p2 = { name: reportDocEchartDetailListDialogStore.condition_name };
    Object.assign(searchParams, searchParams, p1);
    Object.assign(searchParams, searchParams, p2);
    reportDocEchartDetailListDialogStore.doSearch(searchParams);
  }

  renderSearchAdForm() {
    const { reportDocEchartDetailListDialogStore } = this.props;
    const conditioninfo = toJS(reportDocEchartDetailListDialogStore.searchCondition.condition);
    const { form } = reportDocEchartDetailListDialogStore;
    const { isFormInit } = form;
    let group = [];
    isFormInit && conditioninfo.map((c, index) => {
      let items = [];
      c.items.map((field) => {
        let col = 2;
        if (field.conditionType.toUpperCase() == WeaTools.types.CASCADER) col = 1;
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9lyzf8@${field.domkey[0]}`}
            label={`${field.label}`}
            labelCol={{ span: `${field.labelcol}` }}
            ratio1to2
            error={form.getError(field)}
            tipPosition="bottom"
            wrapperCol={{ span: `${field.fieldcol}` }}
          >
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ct207i@${field.domkey[0]}`} fieldConfig={field} form={form} onEnterSearch={() => this.doSearch()} />
          </WeaFormItem>),
          col,
          hide: form.isHide(field, () => false),
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ci6dae@${index}`} needTigger={false} showGroup={true} items={items} />);
    });
    return (<div>{group}</div>);
  }

  render() {
    const { reportDocEchartDetailListDialogStore } = this.props;
    return (
      <div>
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@gcjn6d`}
          searchType={['base']} // 搜索类型
          showSearchAd={reportDocEchartDetailListDialogStore.showSearchAd}
          onSearch={() => this.doSearch()}
          onSearchChange={v => reportDocEchartDetailListDialogStore.setSearchsBaseValue(v)}
        />
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@i8zl3s`}
          hasOrder={true}
          needScroll={true}
          comsWeaTableStore={reportDocEchartDetailListDialogStore.tableStore}
          getColumns={this.getColumns}
          scroll={{ y: 550 }}
        />
      </div>
    );
  }

  getColumns = (columns) => {
    let newColumns = columns.map((column) => {
      if (column.dataIndex == 'num') {
        return {
          ...column,
          render: (text, record) => (<WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@4k7l6t@${column.dataIndex}`} percent={record.numspan} format={() => record.num} />),
        };
      }
      return column;
    });
    return newColumns;
  }
}

export default ReportDocEchartDetailListDialogComponent;
